Dithered Graphics

In this secret "no-cost extra" recipe we explain graphic dithering.

Dithering is a graphics technique which attempts to compensate for a lack of color resolution by substituting patterns of color for actual pixel color values. It takes advantage of the fact that your eyes see groups of pixels more readily than they see single pixels, and will combine regions of differently-colored pixel patterns into "solid-color" regions. It's also used when printing color graphics to a monochrome-only printer, where dithering produces gray tones in place of colors.

Consider the graphic at the right. The top two squares are "true" solid colors, while the bottom two squares are "dithered" colors which attempt (however unsuccessfully) to emulate their counterparts above. You can tell that the dithered colors are inferior, but that's because they're in large blocks. In a photo the differences wouldn't be so obvious.

Now let's look at two actual graphics. (One has 256 colors, the other 16, to play up the effect of dithering.)

This graphic has a lot of nicely-rendered blues. (Your browser might have dithered it slightly.)		This graphic is the same as the one to the left, except dithered in 16 colors. You can see that some of the detail has been lost...!

In practice, your Web page graphics will almost never look this bad. Still, it's good to keep in mind that you can't expect a true-color (24 bit, colors) photo of your dog or cat to look good in 16 colors, and plan accordingly!

Time to go back....

Copyright ©1998 by Charles River Media, All Rights Reserved